<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in carList" :key="index">
				<list-item :item="item">
					<template #preLeft>
						<radio :checked="item.state" @click="switchState(item)" style="align-self: flex-start;"></radio>
					</template>
					<template #word>
						<uni-number-box :min="1" :value="item.count"
							@change="handleChange($event, item)"></uni-number-box>
					</template>
				</list-item>
				<template v-slot:right>
					<view><text class="delete" @click="handleDelete(item)">删除</text></view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>


		<view class="btm">
			<view>
				<radio :checked="totalState" @click="switchTotalState(!totalState)" /><text>全选</text>
				<text>总价：¥ {{totalPrice}}</text>
			</view>
			<button size="mini" type="primary" style="margin: 0;">立即付款</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import carMixins from '../../mixins/car.mixins.js'
	export default {
		mixins: [carMixins],
		computed: {
			...mapState('car', ['carList']),
			...mapGetters('car', ['totalPrice', 'totalState', 'totalCount']),
		},
		methods: {
			...mapMutations('car', ['switchState', 'changeCount', 'switchTotalState', "deleteItem"]),
			handleChange(value, item) {
				this.changeCount({
					...item,
					count: value
				})
			},
			handleDelete(item) {
				uni.showModal({
					title: '警告',
					content: '确认要删除吗？'
				}).then(([err, {
					confirm
				}]) => {
					if (confirm) {
						this.deleteItem(item)
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.btm {
		display: flex;
		height: 90upx;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		width: 100%;

		text {
			margin-left: 10upx;
		}
	}

	.delete {
		width: 120upx;
		height: 100%;
		background-color: #f00;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>